<template>
    <div class="CounterAddress f-cb">
        <!-- <open-account-pregress v-if="isModify==1"></open-account-pregress> -->
        <div class="title">{{$t('m.CounterVerifyIdentity')}}</div>
        <ul class="list f-cb">
            <li v-for="(item,index) in list" :key="index" @click="ChangeAddress(item)" :class="item.id==sceneId?'hover':''">
                <p>{{$t('m.Addresss')}}：{{item['name_'+lang]}}{{item['area_'+lang]}}{{item['content_'+lang]}}</p>
                <p>{{$t('m.Telephone')}}：{{item.mobile_zh}}</p>
                <p>{{$t('m.Email')}}：{{item.email}}</p>
                <p>{{$t('m.BusinessHours')}}：{{item['business_remark_' + lang]}}</p>
            </li>
        </ul>
        <div class="mainLandBtns f-cb">
            <span class="return" @click="returnLinks">{{isModify==0?$t('m.OtherMethods'):$t('m.Previousstep')}}</span>
            <span class="next" @click="nextLinks">{{$t('m.ConfirmStore')}}</span>
        </div>
    </div>
</template>

<script>
    import {pageFlow,BtnsFlow,uploads,submit} from "@/common/common";
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    export default {
        components: {openAccountPregress},
        data() {
            return{
                list:[],
                lang:sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en',
                sceneId:null,
            }
        },
        computed:{
            flowInfo(){
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            },
            userType(){
                return sessionStorage.getItem('userType')
            },
            isModify(){
                return Number(sessionStorage.getItem('isModify'))
            },
        },
        mounted(){
            this.getScenes();
            window.document.title = this.$t('m.CounterAddress')
            if(sessionStorage.getItem('appointment') != 'undefined' && sessionStorage.getItem('appointment')){
                this.sceneId = JSON.parse(sessionStorage.getItem('appointment')).scene_id
            }
        },
        methods:{
            getScenes(){
                this.$axios.get('/open/scenes')
                .then(res => {
                    if(res.data.code == 1){
                       this.list = res.data.data
                    }else if(res.data.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(function(error) {
                    this.$message({
                        message: error,
                        type: "warning",
                        duration:2000,
                    });
                })
            },
            returnLinks(){
                if(this.isModify == 0){
                    this.$router.replace({ path:'/verification'});
                }else{
                    this.$router.replace({ path:'/indexEnd'});
                }
            },
            nextLinks(){
                var _this = this;
                if(_this.sceneId == null){
                    _this.$message({
                        message: _this.$t('m.Pleasecheck')+_this.$t('m.Addresss'),
                        type: "warning"
                    })
                    return false
                }
                _this.$router.replace({ path:'/CounterOrder'});
            },
            ChangeAddress(item){
                this.sceneId = item.id;
                sessionStorage.setItem('sceneId',item.id)
            }
        },
        watch:{

        },
    }
</script>

<style lang="less">
    .CounterAddress{
        padding-top:38px;
        width: 460px;
        margin:0 auto;
        .title{
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            margin-bottom: 9px;
        }
        .list{
            border-bottom:1px solid @e7e6eb;
            margin-bottom:60px;
            li{
                padding:8px 20px 13px 0;
                border-top:1px solid @e7e6eb;
                cursor: pointer;
                background: url(~@/assets/examine09.png) no-repeat right center;
                background-size:15px auto;
                p{
                    font-size: 14px;
                    color: @titleColor;
                    line-height: 20px;
                    padding:7px 0;
                }
            }
            li.hover{
                background: url(~@/assets/examine09_h.png) no-repeat right center;
            }
        }
        .mainLandBtns{
            width: 100%;
            text-align: center;
            font-size: 0;
            span{
                cursor: pointer;
                width: 180px;
                height: 36px;
                line-height: 36px;
                border-radius:3px;
                display:inline-block;
                text-align: center;
                font-size: 14px;
                transition: opacity 0.3s;

            }
            span:first-child{
                margin-right: 40px;
            }
            span:hover{
                opacity: 0.8;
            }
            span.return{
                background: @e7e6eb;
                color: @000;
            }
            span.next{
                background: @hoverColor;
                color: @fff;
            }
        }
    }
</style>